<template>

  <div>
    <Layout>
      <Content class="layout-content">
        <Row>

          <Col span="1.5">
            开始日期：
          </Col>
          <Col span="3">
            <DatePicker type="date" v-model="startDate" :clearable="false" :editable="false" placeholder="请选择日期"
                        style="width: 150px"
            />
          </Col>
          <Col span="1.5">
            结束日期：
          </Col>
          <Col span="3">
            <DatePicker type="date" v-model="endDate" :clearable="false" :editable="false" placeholder="请选择日期"
                        style="width: 150px"
            />
          </Col>
          <Col span="3">
            <Button type="primary" @click="syncNow">同步</Button>
          </Col>
        </Row>
        <Divider/>
        <Row>
          <Col span="24">
            <div style="margin-left: 13%;">
              <LogView></LogView>
            </div>
          </Col>
        </Row>
      </Content>
    </Layout>

  </div>


</template>
<script setup>
import {onMounted, ref, toRaw, inject, getCurrentInstance} from "vue";
import api from '../request/apis'
import moment from "moment";
import {Col, Message} from 'view-ui-plus'
import {nextTick, debounce} from '../utils'
import Editor, {
  ElementType, PageMode,
  RowFlex,
} from '@hufe921/canvas-editor';
import LogView from "./logview/LogView.vue";
import {info} from "./logview/index.js";

const divRef = ref()
const editor = ref();


const startDate = ref(new Date());

const endDate = ref(new Date());

const syncNow = async () => {
  console.log(startDate);
  console.log(endDate)
  const tid = await api.sync(moment(startDate.value).format('YYYY-MM-DD'), moment(endDate.value).format('YYYY-MM-DD'));
  await startSyncLog(tid);
}


const startSyncLog = (tid) => {
  const p = new Promise(async (resolve, reject) => {
    await repeatQueryLog(tid, 0, resolve);
  })
  return p;
}
const repeatQueryLog = async (tid, index, resolve) => {
  let result = null;
  try {
    result = await api.querySyncLog(tid);
  } catch (e) {
    resolve();
  }
  if (result) {
    info(result);
    index = 0;
  } else {
    index++;
  }
  if (index > 100) {
    resolve();
    return;
  }
  setTimeout(function () {
    repeatQueryLog(tid, index, resolve);
  }, 1000);

}

onMounted(() => {

})
</script>
<style scoped>
</style>